@import '../../theme/style/variables.module.less';

.container {
    .flex(center, flex-end);
    z-index: @mi-zindex + 1000;
    position: relative;
}

.input {
    .ellipsis();
    background: var(--mi-search-input-background-color);
    .gradient(var(--mi-search-input-background-gradient-start), var(--mi-search-input-background-gradient-stop));
    outline: none;
    border: .0625rem solid var(--mi-search-input-border);
    .properties(line-height, 22);
    .transition();
    list-style: none;
    .radius(48);
    color: var(--mi-search-input-text);
    .letter-spacing();
    .properties(width, 72);
    .properties(height, 32);
    .properties(padding-top);
    .properties(padding-bottom);
    position: relative;

    &::placeholder {
        color: var(--mi-search-input-placeholder);
        .properties(padding-left);
        .transition();
    }
}

.suffix {
    position: absolute;
    .properties(right, 12);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    .transition();
}

.mask {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: @mi-zindex + 500;
}

.loading {
    position: relative;
    width: 100%;
    height: 100%;
    .flex(center, center, column);

    &-spinner {
        .properties(width, 80);
        .properties(height, 80);
        display: inline-block;
        overflow: hidden;
        background: transparent;
    }

    &-anim {
        width: 100%;
        height: 100%;
        position: relative;
        transform: translateZ(0) scale(0.8);
        backface-visibility: hidden;
        transform-origin: 0 0;

        div {
            box-sizing: content-box;
        }
    
        > div {
            transform: scale(0.8);
            transform-origin: 3.125rem 3.125rem;
    
            > div {
                animation: mi-anim-move 3s linear infinite;
                position: absolute;
    
                > div:nth-child(1) {
                    .properties(width, 36);
                    .properties(height, 36);
                    .circle();
                    border: .375rem solid var(--mi-search-loading);
                    background: transparent;
                }
    
                > div:nth-child(2) {
                    .properties(width, 8.5);
                    .properties(height, 25.5);
                    transform: rotate(-45deg);
                    background: var(--mi-search-loading);
                    border-radius: 0 0 .25rem .25rem;
                    position: absolute;
                    .properties(top, 34);
                    .properties(left, 42.5);
                }
            }
        }
    }

    &-text {
        .properties(margin-top);
        .letter-spacing(4);
    }
}

.list {
    width: 100%;
    position: absolute;
    left: 0;
    border: 0.0625rem solid var(--mi-search-list-border);
    background-color: var(--mi-search-list-background);
    .gradient(var(--mi-search-list-background-gradient-start), var(--mi-search-list-background-gradient-stop));
    overflow: hidden;
    .properties(height, 248);
    .properties(min-height, 164);
    max-height: 100vh;
    transform-origin: top right;
    .transition();
    .radius(8);
    .flex(center, flex-start, column);
    z-index: @mi-zindex + 1000;
}

.noData {
    .flex(center, center, column);
    .transition();
    width: 100%;
    height: 100%;

    :global(.anticon) {
        .font-size(20);
    }
}

.focused {
    .input {
        .properties(padding-left, 12);
        .properties(padding-right, 36);
        .properties(width, 260);
        max-width: 100vw;

        &::placeholder {
            padding-left: 0;
        }
    }
}

.custom {
    &-width {
        .input {
            line-height: unset;
        }
    }
}

.items {
    .flex(flex-start, flex-start, column);
    .properties(padding, 12);
    padding-bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .transition();
    overflow-x: hidden;
    overflow-y: auto;
    .hide-scrollbar();

    &-pagination {
        height: calc(100% - 3.5rem);
    }

    .item {
        .flex(center, flex-start);
        width: 100%;
        .properties(padding-bottom);
        .properties(margin-bottom);
        border-bottom: .0625rem solid var(--mi-search-list-item-divider);
        cursor: pointer;

        &:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        > :global(.anticon) {
            .font-size(18);
            .properties(margin-right, 12);
        }

        &-avatar {
            .properties(width, 20);
            .properties(height, 20);
            .circle();
            .properties(margin-right, 12);
            border: .0625rem solid var(--mi-search-list-item-avatar-border);
            transform: scale(1.1);
            overflow: hidden;
        }

        &-info {
            .flex(flex-start, flex-start, column);
            overflow: hidden;

            &-title {
                .font-size(14, bold);
                color: var(--mi-search-list-item-title);
                .ellipsis();
            }

            &-summary {
                .font-size(12);
                .lines(2);
                color: var(--mi-search-list-item-summary);
            }
        }
    }
}

.pagination {
    .flex();
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    .properties(height, 56);
    border-top: .0625rem solid var(--mi-search-list-pagination-border);
    .letter-spacing();
    background-color: var(--mi-search-list-pagination-background);
    z-index: 1;
    .frosted();
    border-radius: 0 0 .5rem .5rem;

    &-page {
        .flex();

        input {
            .properties(width, 36);
            .properties(height, 22);
            border: .0625rem solid var(--mi-search-list-pagination-input-borde);
            .radius();
            .properties(margin-left, 4);
            .properties(margin-right, 4);
            outline: none;
            color: var(--mi-search-list-pagination-input-text);
            text-align: center;
            font-weight: bold;

            &:hover,
            &:focus,
            &:visited,
            &:active,
            &:link {
                outline: none;
            }

            &[type="number"] {
                &::-ms-clear {
                    display: none;
                }

                &::-webkit-inner-spin-button,
                &::-webkit-outer-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }
            }
        }
    }

    &-prev,
    &-next {
        .transition();
        .flex();
        cursor: pointer;
        color: var(--mi-search-list-pagination-control-default);

        &:global(.disabled) {
            color: var(--mi-search-list-pagination-control-disabled);
            cursor: not-allowed;
        }
    }

    &-prev {
        .properties(margin-right);
    }

    &-next {
        .properties(margin-left);
        .properties(margin-right);
    }

    &-total {
        > span {
            .properties(margin-left, 4);
            .properties(margin-right, 4);
        }
    }
}

.search {
    &-key {
        color: var(--mi-search-key);
    }
}

.error {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .flex(center, center, column);

    &-inner {
        text-align: center;
        color: var(--mi-search-error);
        .properties(padding, 16);
        overflow-y: auto;
        overflow-x: hidden;
        .scrollbar();
    }

    :global(.anticon) {
        .font-size(32);
        .properties(margin-bottom, 16);
    }

    p {
        margin: 0;
        text-align: center;
    }
}

@keyframes mi-anim-move {
    0% { transform: translate(0.0625rem, 0.0625rem) }
    33.33% { transform: translate(3.1875rem, 0.0625rem) }
    66.66% { transform: translate(1.3125rem, 3.1875rem) }
    100% { transform: translate(0.0625rem, 0.0625rem) }
}

:export {
    --search-key: var(--mi-primary);
    --search-error: var(--mi-error);
    --search-loading: var(--mi-primary);
    --search-input-text: var(--mi-primary);
    --search-input-background-color: transparent;
    --search-input-background-gradient-start: transparent;
    --search-input-background-gradient-stop: transparent;
    --search-input-placeholder: var(--mi-on-surface-variant);
    --search-input-border: rgba(var(--mi-rgb-on-surface-variant), .5);
    --search-list-border: rgba(var(--mi-rgb-on-surface-variant), .5);
    --search-list-background-color: transparent;
    --search-list-background-gradient-start: var(--mi-surface);
    --search-list-background-gradient-stop: var(--mi-surface-variant);
    --search-list-item-divider: rgba(var(--mi-rgb-on-surface-variant), .15);
    --search-list-item-title: var(--mi-on-surface-variant);
    --search-list-item-summary: rgba(var(--mi-rgb-on-surface-variant), .6);
    --search-list-item-avatar-border: var(--mi-primary);
    --search-list-pagination-border: rgba(var(--mi-rgb-on-surface-variant), .3);
    --search-list-pagination-background: rgba(var(--mi-rgb-surface-variant), .2);
    --search-list-pagination-input-border: rgba(var(--mi-rgb-on-surface-variant), .3);
    --search-list-pagination-input-text: var(--mi-shadow);
    --search-list-pagination-control-default: var(--mi-on-surface-variant);
    --search-list-pagination-control-disabled: rgba(var(--mi-rgb-on-surface-variant), .2);
}